<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>添加货币</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/fastclick.js"></script>
    <style>
        body,
        html {
            background: #fff;
        }

        .step-head {
            padding: 24px 0;
            background: url(../../image/audit/stepback.png) no-repeat;
            background-size: 100%;
        }

        .step-img {
            padding: 0 28px;
        }

        .step-img>img {
            width: 100%;
        }

        .step-head-text {
            padding: 0 14px;
            margin-top: 12px;
            overflow: hidden;
            font-size: 12px;
            color: #323232;
        }

        .step-head-text span {
            width: 33.33%;
            text-align: center;
        }

        .step-head-text span:nth-child(1) {
            float: left;
            text-align: left;
        }

        .step-head-text span:nth-child(2) {
            float: left;
        }

        .step-head-text span:nth-child(3) {
            float: right;
            text-align: right;
        }

        .field-box {
            padding: 0 13px;
        }

        .field-li {
            height: 52px;
            position: relative;
            border-bottom: #ececec solid 1px;
            box-sizing: content-box;
            color: #222;
        }

        .field-li>span {
            display: block;
            position: absolute;
            top: 2px;
            left: 0;
            z-index: 2;
            padding-right: 10px;
            font-size: 14px;
            color: #222;
            line-height: 48px;
            background: #fff;
        }

        .field-li input {
            width: 100%;
            position: absolute;
            left: 0;
            top: 2px;
            z-index: 1;
            height: 48px;
            line-height: 19px;
            font-size: 14px;
            text-align: right;
            user-select: text;
            -webkit-user-select: text;
        }

        .label-check {
            position: absolute;
            right: 0;
            top: 2px;
            z-index: 1;
            height: 48px;
        }

        .label-check span {
            float: right;
            margin-top: 17px;
        }

        .check-yes {
            display: block;
            width: 48px;
            height: 14px;
            line-height: 14px;
            font-size: 14px;
            padding-left: 19px;
            background: url(../../image/audit/radio.png) no-repeat top left;
            background-size: 14px;
        }

        .check-no {
            display: block;
            width: 48px;
            height: 14px;
            line-height: 14px;
            font-size: 14px;
            padding-left: 19px;
            background: url(../../image/audit/radio.png) no-repeat 0 -14px;
            background-size: 14px;
        }

        .step-btn {
            width: 80%;
            margin-left: 10%;
            margin-top: 43px;
            height: 46px;
            border-radius: 23px;
            background: -webkit-linear-gradient(#ffcf03, #ffa403);
            background: -o-linear-gradient(#ffcf03, #ffa403);
            background: -moz-linear-gradient(#ffcf03, #ffa403);
            background: linear-gradient(#ffcf03, #ffa403);
            /*box-shadow: 0 5px 10px 5px rgba(254, 124, 24, 0.1);*/
            font-size: 17px;
            color: #323232;
            text-align: center;
            line-height: 46px;
        }
    </style>
</head>

<body>
    <div id="cell" v-cloak>
        <div class="stepbox">
            <div class="step-head">
                <div class="step-img">
                    <img src="../../image/audit/step11.png">
                </div>
                <p class="step-head-text">
                    <span>信息认证</span>
                    <span>身份提交</span>
                    <span>上传照片</span>
                </p>
            </div>
            <div class="field-box">
                <ul>
                    <li class="field-li">
                        <span>姓名</span>
                        <input type="text" placeholder="请输入姓名" v-model="name" @blur="blur()" id="name" @click="inputClick('name')">
                    </li>
                    <li class="field-li">
                        <span>银行卡</span>
                        <input type="number" placeholder="请输入银行卡号" v-model="bankCard" @blur="blur()" id="bankCard" @click="inputClick('bankCard')">
                    </li>
                    <li class="field-li">
                        <span>身份证</span>
                        <input type="number" placeholder="15位或18位身份证号码X请大写" v-model="idCard" @blur="blur()" id="idCard" @click="inputClick('idCard')">
                    </li>
                    <li class="field-li">
                        <span>可接受最高还款额度(元)</span>
                        <input type="number" placeholder="请输入" v-model="maxMoney" @blur="blur()" id="maxMoney" @click="inputClick('maxMoney')">
                    </li>
                    <li class="field-li">
                        <span>现单位是否缴纳社保</span>
                        <div class="label-check">
                            <span :class="isSocial?'check-no':'check-yes'" @click="isSocial = 0">否</span>
                            <span :class="isSocial?'check-yes':'check-no'" @click="isSocial = 1">是</span>
                        </div>
                    </li>
                    <li class="field-li">
                        <span>车辆情况</span>
                        <div class="label-check">
                            <span :class="isCar?'check-no':'check-yes'" @click="isCar = 0">否</span>
                            <span :class="isCar?'check-yes':'check-no'" @click="isCar = 1">是</span>
                        </div>
                    </li>
                </ul>
                <p class="step-btn" @click="handlerStep">下一步</p>
            </div>
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/aui-toast.js"></script>
<script src="../../script/jquery.min.js"></script>
<script>
    apiready = function() {
        FastClick.attach(document.body);
        header = $api.byId('header');
        //适配iOS 7+，Android 4.4+状态栏
        $api.fixStatusBar(header);
        // api.addEventListener({
        //     name: 'keyback'
        // }, function(ret, err) {
        //     api.openWin({
        //         name: 'home',
        //         url: 'home.html'
        //     });
        // });
        var toast = new auiToast();
        var vm = new Vue({
            el: '#cell',
            data: {
                name: '',
                bankCard: '',
                idCard: '',
                maxMoney: '',
                isSocial: 1,
                isCar: 1
            },
            methods: {
                handlerStep() {
                    var that = this;
                    var pattern = /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{17}|\d{18})$/;
                    var str = that.bankCard.replace(/\s+/g, "");
                    if (that.name === '') {
                        $api.confirm('请输入姓名')
                        return false
                    } else if (that.bankCard.length === 0) {
                        $api.confirm('请输入正确的银行卡号')
                        return false
                    } else if (!pattern.test(str)) {
                        $api.confirm('请输入正确的银行卡号')
                        return false
                    } else if (that.idCard === '') {
                        $api.confirm('请输入身份证号')
                        return false
                    } else if (that.idCard.length !== 15 && that.idCard.length !== 18) {
                        $api.confirm('请输入正确的身份证号')
                        return false
                    } else if (that.maxMoney === '') {
                        $api.confirm('请输入最高还款额度')
                        return false
                    }
                    toast.loading({
                        title: "加载中",
                        duration: 2000
                    });
                    $.ajax({
                        type: "post",
                        url: "http://xhf.8jieyun.com/identityInfo/basic",
                        dataType: 'json',
                        async: false,
                        data: {
                            phone: $api.getStorage('phone2'),
                            name: that.name,
                            bankCard: that.bankCard,
                            idNumber: that.idCard,
                            acceptRepaymentAmount: that.maxMoney,
                            paySocialSecurity: that.isSocial,
                            carStatus: that.isCar
                        },
                        success: function(data) {
                            if (data.code === 10200) {
                                api.openWin({
                                    name: 'wraptwo',
                                    url: 'wraptwo.html'
                                });
                                // that.name = ''
                                // that.bankCard = ''
                                // that.idCard = ''
                                // that.maxMoney = ''
                                // that.isSocial = 1
                                // that.isCar = 1
                                toast.hide();
                            } else {
                                alert(data.msg)
                            }
                        }
                    });
                },
                blur() {
                    window.scroll(0, 0)
                },
                inputClick(id) {
                    $api.byId(id).focus()
                }
            },
            mounted: function() {
            }
        })
    }
</script>

</html>
